import React from "react";
import {
  Image,
  StyleSheet,
  View,
  Text,
  TouchableWithoutFeedback,
  StatusBar,
  Platform,
} from "react-native";
import SplashScreen from "react-native-splash-screen";
import Orientation from "react-native-orientation";
import { connect } from "react-redux";
import { getStatusBarHeight } from "utils/adaptation";
import { CZH, CZH_CN } from "language/complex-zh";
import { SZH, SZH_CN } from "language/simple-zh";
import { getStore } from "utils";
// import Getui from "react-native-getui";

import welcomeBackground from "../../../assets/images/logo_launch.png";
import welcomeBackground2 from "../../../assets/images/logo_launch2.png";

const nav = getStatusBarHeight();

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    // paddingTop: nav,
  },
  background: {
    width: "100%",
    height: "100%",
    resizeMode: "cover",
  },
  timeLeft: {
    marginTop: nav,
    position: "absolute",
    top: 16,
    right: 17,
    paddingHorizontal: 20,
    paddingVertical: 7,
    borderRadius: 18,
    fontSize: 14,
    // backgroundColor: "rgba(0,0,0,0.1)",
    borderColor: "#fff",
    borderWidth: 1,
  },
  timeLeftText: {
    color: "white",
  },
});

/**
 * 欢迎页
 */
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeLeft: 3,
      show: false,
      bgurl: welcomeBackground2,
    };

    // 锁定当前页为竖屏
    Orientation.lockToPortrait();
  }

  componentDidMount() {
    StatusBar.setBarStyle("light-content");
    StatusBar.setTranslucent(true);
    StatusBar.setBackgroundColor("#00000000");

    // 读取用户选择的语音
    getStore("lang").then(res => {
      if (res) {
        if (res === "simple") {
          global.lang = SZH;
          global.lang_cn = SZH_CN;
          this.setState({ bgurl: welcomeBackground });
        } else {
          global.lang = CZH;
          global.lang_cn = CZH_CN;
          this.setState({ bgurl: welcomeBackground2 });
        }
      }
      // 组件加载完毕之后，隐藏启动页
      if (Platform.OS === "android") {
        SplashScreen.hide();
      }

      this.setState({ show: true });
      this.timer();
    });
  }

  componentWillUnmount() {
    StatusBar.setBarStyle("dark-content");
    StatusBar.setTranslucent(false);
  }

  timer = () => {
    const { navigation } = this.props;
    if (!navigation.isFocused()) {
      navigation.push("WelcomePage");
      return;
    }
    this.timer = setInterval(() => {
      const { timeLeft: lastTimeLeft } = this.state;
      const timeLeft = lastTimeLeft - 1;
      if (timeLeft <= 0) {
        this.goto();
      } else {
        this.setState({ timeLeft });
      }
    }, 1000);
  };

  goto = () => {
    const { navigation } = this.props;
    getStore("userInfo").then(() => {
      // if (res !== null && Object.keys(res).length !== 0) {
      //   navigation.navigate("Home");
      //   clearInterval(this.timer);
      // } else {
      //   navigation.navigate("Login");
      //   clearInterval(this.timer);
      // }
      // navigation.navigate("Login");
      // navigation.navigate("Chat");
      navigation.navigate("Main");

      clearInterval(this.timer);
    });
  };

  render() {
    const { timeLeft, show, bgurl } = this.state;
    return (
      <View style={styles.container}>
        {show && (
          <View>
            <Image source={bgurl} style={styles.background} />
            <TouchableWithoutFeedback
              onPress={() => {
                const { dispatch } = this.props;

                this.goto();
              }}
            >
              <View style={styles.timeLeft}>
                <Text style={styles.timeLeftText}>
                  {global.lang.welcome.skipText}
                  {timeLeft}
                  {"s"}
                </Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        )}
      </View>
    );
  }
}

export default connect()(Welcome);
